<template>
  <div class="ele-body">
    <div class="bg-fff">
      <a-form
        :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" :xs="24">
            <div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <span class="fs-14">查看导入数据</span>
                </div>
                <table cellpadding="0" cellspacing="0" class="recepit_table2">
                  <tbody>
                    <tr>
                      <td class="tit text-center" rowspan="2">已完成</td>
                      <td class="tit">数据类型</td>
                      <td>{{ info.type_name || '' }}</td>
                      <td class="tit">数据量</td>
                      <td>{{ info.count || '' }}</td>
                    </tr>
                    <tr>
                      <td class="tit">创建人</td>
                      <td>{{ info.make_user_name || '' }}</td>
                      <td class="tit">创建时间</td>
                      <td>{{ info.create_time || '' }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="padding-15">
                <div class="flex align-center justify-between margin-bottom-15">
                  <a-radio-group
                    v-model:value="type"
                    button-style="solid"
                    @change="change"
                  >
                    <a-radio-button value="1"
                      >成功（{{ info.success || 0 }}）</a-radio-button
                    >
                    <a-radio-button value="2"
                      >失败（{{ info.fail || 0 }}）</a-radio-button
                    >
                  </a-radio-group>
                  <a-space>
                    <a-button type="primary" @click="optAction(1)"
                      >导出失败记录</a-button
                    >
                    <a-button type="primary" @click="optAction(2)"
                      >导出成功记录</a-button
                    >
                    <a-button type="primary" @click="optAction(3)"
                      >下载源文件</a-button
                    >
                  </a-space>
                </div>
                <div class="padding-x-15 bg-fff">
                  <vxe-table
									  v-if="info.type ==1"
                    border
                    ref="xTable"
                    align="center"
                    show-overflow
                    :column-config="{ resizable: true }"
                    :data="tableData"
                  >
                    <vxe-column
                      field="mobile"
                      title="手机号"
                      width="150"
                      fixed="left"
                    />
                    <vxe-column
                      field="name"
                      title="姓名"
                      width="100"
                      fixed="left"
                    />
                    <vxe-column field="order_sn" title="销售单号" width="150" />
                    <vxe-column
                      field="sales_time"
                      title="销售时间"
                      width="150"
                    />
                    <vxe-column
                      field="store_name"
                      title="门店名称"
                      width="150"
                    />
                    <vxe-column field="bar_code" title="条码" width="150" />
                    <vxe-column
                      field="sales_type"
                      title="销售类型"
                      width="150"
                    />
                    <vxe-column
                      field="goods_name"
                      title="货品名称"
                      width="150"
                    />
                    <vxe-column
                      field="subclass_code_name"
                      title="小类"
                      width="150"
                    />
                    <vxe-column
                      field="classes_code_name"
                      title="品类"
                      width="150"
                    />
                    <vxe-column
                      field="quality_code_name"
                      title="成色"
                      width="150"
                    />
                    <vxe-column
                      field="series_code_name"
                      title="系列"
                      width="150"
                    />
                    <vxe-column
                      field="gem_category_code_name"
                      title="石类"
                      width="150"
                    />
                    <vxe-column
                      field="finance_code_name"
                      title="财务分类"
                      width="150"
                    />
                    <vxe-column
                      field="brand_code_name"
                      title="经营品牌"
                      width="150"
                    />
                    <vxe-column field="piece_weight" title="货重" width="150" />
                    <vxe-column
                      field="gold_weight"
                      title="净金重"
                      width="150"
                    />
                    <vxe-column
                      field="main_stone_weight"
                      title="主石重"
                      width="150"
                    />
                    <vxe-column
                      field="main_stone_color_name"
                      title="主石颜色"
                      width="150"
                    />
                    <vxe-column
                      field="main_stone_neatness_name"
                      title="主石净度"
                      width="150"
                    />
                    <vxe-column
                      field="main_stone_cut_name"
                      title="主石切工"
                      width="150"
                    />
                    <vxe-column
                      field="cert_first_code"
                      title="证书1编号"
                      width="150"
                    />
                    <vxe-column
                      field="cert_second_code"
                      title="证书2编号"
                      width="150"
                    />
                    <vxe-column field="cost" title="成本价" width="150" />
                    <vxe-column
                      field="retail_type"
                      title="零售方式"
                      width="150"
                    />
                    <vxe-column
                      field="original_gold_price"
                      title="原金价"
                      width="150"
                    />
                    <vxe-column
                      field="sales_gold_price"
                      title="销售金价"
                      width="150"
                    />
                    <vxe-column
                      field="sticker_price"
                      title="标签价"
                      width="150"
                    />
                    <vxe-column
                      field="real_amount"
                      title="销售价"
                      width="150"
                    />
                    <vxe-column field="sales_labor" title="工费" width="150" />
                    <vxe-column field="num" title="数量" />
                    <vxe-column
                      field="coupon_amount"
                      title="卡券抵扣金额"
                      width="150"
                    />
                    <vxe-column
                      field="real_discount"
                      title="折扣"
                      width="150"
                    />
                    <vxe-column
                      field="small_change"
                      title="优惠金额"
                      width="150"
                    />
                    <vxe-column
                      field="pay_amount"
                      title="实付金额"
                      width="150"
                    />
                    <vxe-column
                      field="make_user_id"
                      title="收银员"
                      width="150"
                    />
                    <vxe-column
                      field="main_salesman_id"
                      title="主销导购"
                      width="150"
                    />
                    <vxe-column
                      field="vice_salesman_id"
                      title="辅销导购"
                      width="150"
                    />
                    <vxe-column field="note_name" title="备注" width="150" />
                    <vxe-column
                      field="cause"
                      title="失败原因"
                      width="150"
                      v-if="type == 2"
                    />
                  </vxe-table>
									
				<vxe-table
				  v-if="info.type ==2"
				  border
				  ref="xTable"
				  align="center"
				  show-overflow
				  :column-config="{ resizable: true }"
				  :data="tableData"
				>
				  <vxe-column
					field="mobile"
					title="手机号"
					width="150"
					fixed="left"
				  />
				  <vxe-column
					field="name"
					title="姓名"
					width="150"
					fixed="left"
				  />
				  <vxe-column field="refund_sn" title="退货单号" width="150" />
				  <vxe-column field="create_time" title="退货时间" width="150" />
				  <vxe-column field="store_name" title="门店名称" width="150" />
				  <vxe-column field="bar_code" title="条码" width="100" />
				  <vxe-column field="dep_charge" title="折旧金额" width="100" />
				  <vxe-column field="refund_amount" title="实退金额" width="100" />
				  <vxe-column field="order_sn" title="销售单号" width="150" />
				  <vxe-column field="note" title="备注" />
                  </vxe-table>
                </div>
                <div class="padding-x-15 bg-fff">
                  <vxe-pager
                    size="mini"
                    :current-page="form.page"
                    :page-size="form.page_size"
                    :total="total"
                    :layouts="[
                      'Total',
                      'PrevPage',
                      'JumpNumber',
                      'NextJump',
                      'FullJump'
                    ]"
                    @page-change="handlePageChange"
                  />
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { finishPageTab, reloadPageTab } from '@/utils/page-tab-util';
  import { daochuFn } from '@/utils/daochu.js';
  import { actionFn } from '@/utils/action.js';
  import {
    get_order_import_detail,
    get_order_import_success_list,
    get_order_import_fail_list,
    get_order_import_success_record,
    get_order_import_fail_record,
    get_order_import_all_record
  } from '@/api/order/order_import';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const loading = ref(false);
  const info = ref({});
  const type = ref('1');
  const total = ref(0);
  const tableData = ref([]);
  const form = reactive({
    page: 1,
    page_size: 10,
    id: query.id
  });
  const exportData = reactive({
    url: '',
    params: {}
  });

  onMounted(() => {
    console.log(query);
    get_order_import_detail({
      id: query.id
    }).then((res) => {
      info.value = res;
    });
    getSuccessList();
  });
  const change = (e) => {
    console.log(e);
    form.page = 1;
    if (e.target.value == 1) {
      getSuccessList();
    } else if (e.target.value == 2) {
      getFailList();
    }
  };
  const handlePageChange = ({ currentPage, pageSize }) => {
    form.page = currentPage;
    if (type.value == 1) {
      getSuccessList();
    } else if (type.value == 2) {
      getFailList();
    }
  };
  const getSuccessList = () => {
    get_order_import_success_list(form).then((res) => {
      total.value = res.total;
      tableData.value = res.data;
    });
  };
  const getFailList = () => {
    get_order_import_fail_list(form).then((res) => {
      console.log(res);
      total.value = res.total;
      tableData.value = res.data;
    });
  };
  const optAction = (index) => {
    exportData.params.id = query.id;
    if (index == 1) {
      exportData.url = 'order/order_import/success_record';
      daochuFn(exportData);
    } else if (index == 2) {
      exportData.url = 'order/order_import/fail_record';
      daochuFn(exportData);
    } else if (index == 3) {
      /* let data = {
        url: 'order/order_import/all_record',
        parmas: { id: 123 }
      };
      daochuFn(data); */
      exportData.url = 'order/order_import/all_record';
      daochuFn(exportData);
    }
  };
</script>

<style lang="less" scoped></style>
